<template>
  <view class="privacy-container">
    <scroll-view scroll-y class="content">
      <view class="header">
        <text class="title">隐私政策</text>
        <text class="update-time">最后更新日期：2025/05/12</text>
      </view>

      <view class="section">
        <text class="section-title">1. 信息收集</text>
        <text class="section-content">
          我们可能会收集您在使用本应用时提供的个人信息，包括但不限于： -
          账号信息（如用户名、手机号） - 设备信息（如设备型号、操作系统版本） -
          使用数据（如访问记录、点击行为）
        </text>
      </view>

      <view class="section">
        <text class="section-title">2. 信息使用</text>
        <text class="section-content">
          我们收集的信息将用于： - 提供和优化我们的服务 - 保障账户安全 -
          改进用户体验 - 遵守法律法规要求
        </text>
      </view>

      <view class="section">
        <text class="section-title">3. 信息共享</text>
        <text class="section-content">
          我们不会将您的个人信息出售给第三方。仅在以下情况下可能会共享信息： -
          获得您的明确同意 - 根据法律法规要求 - 为保护用户或公众利益
        </text>
      </view>

      <view class="section">
        <text class="section-title">4. 您的权利</text>
        <text class="section-content">
          您有权： - 访问、更正或删除您的个人信息 - 限制或反对我们处理您的信息 -
          获取您的个人信息副本
        </text>
      </view>

      <view class="section">
        <text class="section-title">5. 联系我们</text>
        <text class="section-content">
          如果您有任何关于隐私政策的疑问，请联系我们： 邮箱：privacy@example.com
        </text>
      </view>

      <!-- <view class="agree-btn" @click="handleAgree">
        <text>同意并继续</text>
      </view> -->
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";

const currentDate = ref(new Date().toLocaleDateString());

const handleAgree = () => {
  Taro.setStorageSync("hasAgreedPrivacy", true);
  Taro.navigateBack();
};
</script>

<style lang="scss">
.privacy-container {
  padding: 40rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #ffffff;
  line-height: 1.6;

  .content {
    width: 100%;
    max-width: 750rpx;
    margin: 0 auto;
  }

  .header {
    margin-bottom: 60rpx;
    text-align: center;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .update-time {
      display: block;
      font-size: 24rpx;
      color: #999;
    }
  }

  .section {
    margin-bottom: 50rpx;

    .section-title {
      display: block;
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
      position: relative;
      padding-left: 20rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 30rpx;
        background-color: #07c160;
        border-radius: 4rpx;
      }
    }

    .section-content {
      font-size: 28rpx;
      color: #666;
      line-height: 1.8;
      text-align: justify;

      &::before {
        content: '• ';
        color: #07c160;
        font-weight: bold;
      }
    }
  }

  .agree-btn {
    margin: 60rpx auto;
    width: 80%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background: linear-gradient(135deg, #07c160, #05a14e);
    color: white;
    border-radius: 45rpx;
    font-size: 32rpx;
    font-weight: 500;
    box-shadow: 0 10rpx 20rpx rgba(7, 193, 96, 0.2);
    transition: all 0.3s;

    &:active {
      transform: scale(0.98);
      box-shadow: 0 5rpx 10rpx rgba(7, 193, 96, 0.3);
    }
  }

  /* 适配不同屏幕尺寸 */
  @media (max-width: 480px) {
    .section-content {
      font-size: 26rpx !important;
    }

    .agree-btn {
      width: 90%;
    }
  }
}
</style>
